<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <!--时间筛选-->
        <div class="box">
            <el-row type="flex" :gutter="15">
                <el-col :span="22">
                    <el-row type="flex" :gutter="15">
                        <el-col :span="7">
                            <el-date-picker
                                    v-model="timeVal"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    @change="pickTime"
                            >
                            </el-date-picker>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="primary">查询</el-button>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="2">
                    <!--<el-button type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>-->
                </el-col>
            </el-row>
        </div>
        <el-table
                :data="tableData"
                border
                show-summary
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="商品名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="销售价格">
            </el-table-column>
            <el-table-column
                    prop="amount1"
                    label="一级分利">
            </el-table-column>
            <el-table-column
                    prop="amount2"
                    sortable
                    label="二级分利">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    sortable
                    label="物流费用">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    sortable
                    label="平台手续费">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    sortable
                    label="销售数量">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    sortable
                    label="单件毛利">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    sortable
                    label="利润">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    sortable
                    label="销售">
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        name: "grossProfit",
        components:{breadcrumb},
        data(){
            return {
                routerList:[
                    {
                        name:'财务管理',
                        path:'/'
                    },
                    {
                        name:'毛利核算',
                        path:'/grossProfit'
                    }
                ],
                tableData: [
                    {
                        // id: '12987122',
                        // name: '王小虎',
                        // amount1: '￥234',
                        // amount2: '3.2',
                        // amount3: 10
                    }],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                    ,
                    disabledDate(time){
                        return time.getTime()>Date.now()
                    }
                },
                timeArr:[],
                timeVal:''

            }
        },
        methods:{
            pickTime(){
                let timeArr = []
                for(let i in this.timeVal){
                    let time = this.timeVal[i];
                    let year = time.getFullYear();
                    let month = this.$util.checkTime(time.getMonth() + 1);
                    let day = this.$util.checkTime(time.getDate());
                    let stamp = '';
                    if(i == 0){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 00:00:00`);
                        timeArr.push(stamp)
                    }
                    if(i == 1){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 23:59:59`);
                        timeArr.push(stamp)
                    }
                }
                this.timeArr = timeArr
            },
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;
        height: 60px;
        background: white;
        margin: 20px 0;
        padding: 10px 10px;
        box-sizing: border-box;
        color:#aaa;
    }
    .el-date-editor--daterange.el-input__inner{
        width:100%;
    }
</style>
